<template>
	<view>
		<uni-card title="我的单据" class="cardHeader">
			<view class="line1">
<!-- 				<view class="tag">
					<navigator url="./completedForm" hover-class="navigator-hover">
						<span>
							<icon-svg icon-class="riqi" style="font-size: 18px;"/>
<<<<<<< HEAD
							<text style="font-size: 14px;">你有3张单据待审批</text>
=======
							<text style="font-size: 30rpx;">你有3张单据待审批...</text>
>>>>>>> 2c0e84d472b56262abb3fb284bffa62e3cd5d61f
							<icon-svg icon-class="icon-test7" />
						</span>
					</navigator>
				</view> -->
				<!-- <button class="mini-btn fr" type="default" size="mini">全部确认</button> -->
			</view>
			<navigator url="../add/travelApplyBill/travelApplyBillData">
			<view class="line2">
				<view class="line21">
					<span class="circle"></span>
					<text style="font-size: 14px;">陈赫斯审批中</text>
				</view>
				<view class="line22" style="font-size: 14px;">
					<span style="margin-left: 12px;">报销上海出差</span>
					<span style="font-weight: 600;" class="fr">￥703.00</span>
				</view>
				<view class="line23" style="font-size: 14px;">
					<span>出差申请单</span>
					<span>S20000005</span>
				</view>
			</view>
			</navigator>
			<view class="line3" style="color: #1D89E4;">
				<view>
					<navigator url="./myBill">
					查看全部
					</navigator>
				</view>
			</view>
		</uni-card>
<!-- 		<uni-card @click="handleItem('./applicationItems')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="piliang-copy" style="margin-right: 15rpx;" />申请事项</span>
					<span class="fr">4
						<icon-svg icon-class="icon-test7" /></span>
			</view>
		</uni-card> -->
		<uni-card title="我的借款" class="cardHeader">
			<view class="line1">
				<span class="circle" style="background-color: #39B926;"></span>
				<span style="font-size: 14px;">剩余借款</span>
				<span style="font-weight: 600;" class="fr">￥10,297.00</span>
			</view>
			<view class="line2" style="width: 100%;">
				<view class="greenBar">
					<view class="bar"></view>
				</view>
			</view>
			<view class="line3" style="height: 100rpx;background-color:#F8F8F8;">
				<view class="" style="width:50%;text-align: center; display: inline-block;">
					<view>
						<span class="circle" style="background-color: #1B91FF;"></span>
						<span style="font-size: 14px;">已还款</span>
					</view>
					<span class="line3-money">￥0</span>
				</view>
				<view class="" style="width:50%;text-align: center; display: inline-block;">
					<view>
						<span class="circle" style="background-color: #F9972D;"></span>
						<span style="font-size: 14px;">还款中</span>
					</view>
					<span class="line3-money">￥733.00</span>
				</view>
			</view>
		</uni-card>
		<uni-card @click="handleItem('./waitForApproval')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="shenpi" style="margin-right: 15rpx;" />待我审批</span>
				<!-- <navigator url="./waitForApproval" hover-class="navigator-hover" style="display: inline"> -->
					<span class="fr">3
						<icon-svg icon-class="icon-test7" /></span>
				<!-- </navigator> -->
			</view>
		</uni-card>
		<uni-card  @click="handleItem('./waitForPay')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="iconrz" style="margin-right: 15rpx;" />待我支付</span>
				<!-- <navigator url="./waitForPay" hover-class="navigator-hover" style="display: inline"> -->
					<span class="fr">0
						<icon-svg icon-class="icon-test7" /></span>
				<!-- </navigator> -->
			</view>
		</uni-card>
		<uni-card  @click="handleItem('./waitForPay')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="dingdanzhuangtaidengdai" style="margin-right: 15rpx;" />待我寄送</span>
				<span class="fr">0
					<icon-svg icon-class="icon-test7" /></span>
			</view>
		</uni-card>
		<uni-card  @click="handleItem('./waitForPay')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="fasong" style="margin-right: 15rpx;" />抄送我的</span>
				<span class="fr">0
					<icon-svg icon-class="icon-test7" /></span>
			</view>
		</uni-card>
		<uni-card  @click="handleItem('./waitForPay')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="daibandengdaishenhe" style="margin-right: 15rpx;" />待我收单</span>
				<span class="fr">0
					<icon-svg icon-class="icon-test7" /></span>
			</view>
		</uni-card>
		<uni-card  @click="handleItem('./waitForPay')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="dayin" style="margin-right: 15rpx;" />待我打印</span>
				<span class="fr">0
					<icon-svg icon-class="icon-test7" /></span>
			</view>
		</uni-card>
		<!-- <uni-card  @click="handleItem('./waitForPay')">
			<view class="normalCard">
				<span>
					<icon-svg icon-class="jilu1" style="margin-right: 15rpx;" />随手记</span>
				<span class="fr">0
					<icon-svg icon-class="icon-test7" /></span>
			</view>
		</uni-card> -->
		<view class="bot">
			自定义首页
		</view>
		<zNavigatorBar />
		<!-- <zBtmBar></zBtmBar> -->
	</view>
</template>

<script>
	import zNavigatorBar from "@/pages/common/navigation"
	export default {
		components: {
			zNavigatorBar
		},
		data() {
			return {
				isPopup: false,
				isShowPop: 1
			}
		},
		methods: {
			handleItem(url) {
				this.handleItemURL(url)
			},
			handleItemURL(url) {
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.uni-card__header-title-text {
		font-size: 35rpx !important;
		font-weight: 400;
	}

	.tag {
		width: auto;
		padding: 5rpx;
		font-size: 20rpx;
		display: inline-block;
		color: #1D89E4;
		background-color: #E7F3FF;
		border-radius: 15rpx;
	}

	.line1 {
		margin-top: 15rpx
	}

	.line2 {
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.line22 {
		margin-top: 15rpx;
	}

	.line23 {
		margin-left: 25rpx;
		margin-top: 15rpx;
		font-size: 20rpx;
		font-weight: 200;
		color: gray;
	}

	.line3 {
		margin-top: 25rpx;
		text-align: center;
		font-size: 30rpx;

	}

	.line3-money {
		font-weight: 600;
		text-align: center;
		margin-top: 15rpx;
		display: inline-block;
	}

	.mini-btn {
		color: #1D89E4;
		background-color: white;
		height: 60rpx;
		border: 0.5px solid;
		font-size: 30rpx;
		line-height: 60rpx;
	}

	.fr {
		float: right;
	}

	.circle {
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #1D89E4;
		margin-right: 10rpx;
	}

	.greenBar {
		border-radius: 15rpx;
		margin: 15rpx auto 0;
		height: 15rpx;
		text-align: right;
		line-height: 40px;
		background-color: #39ba26;
		width: 90%;
	}

	.bar {
		border-radius: 0.2rem;
		height: 100%;
		width: 7%;
		background-color: #fb972b;
	}

	.bot {
		margin-top: 50rpx;
		text-align: center;
		color: #fb972b;
		margin-bottom: 30px;
	}
</style>
